<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" />
  <link rel="stylesheet" href="/uploads/icons/style.css" />
  <style>

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    #main-loading {
      position: absolute;
      background: #1c2336;
      z-index: 1;
      width: 100%;
      left: 0;
      height: 100%;
      top: 0;
    }

    .layers-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .layer {
      display: block;
      position: absolute;
      height: 3em;
      width: 3em;
      box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
      -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
      transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
    }

    .layer:nth-of-type(1) {
      background: #534a47;
      margin-top: 1.5em;
      -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
      animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
    }

    .layer:nth-of-type(1):before {
      content: "";
      position: absolute;
      width: 85%;
      height: 85%;
      background: #37332f;
    }

    .layer:nth-of-type(2) {
      background: #5a96bc;
      margin-top: 0.75em;
    }

    .layer:nth-of-type(3) {
      background: rgba(255, 255, 255, 0.6);
      -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
      animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
    }

    @-webkit-keyframes moveup {

      0%,
      60%,
      100% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
      }

      25% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
      }
    }

    @keyframes moveup {

      0%,
      60%,
      100% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
      }

      25% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
      }
    }

    @-webkit-keyframes movedown {

      0%,
      60%,
      100% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
      }

      25% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
      }
    }

    @keyframes movedown {

      0%,
      60%,
      100% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
      }

      25% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
      }
    }



    #micro_app> :first-child {
      height: 100%;
    }
  </style>

  <!-- 使用CDN的CSS文件 -->
  <title>个人网站</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but cli3_base doesn't work properly without JavaScript
      enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="main-loading" class="wh100">
    <div class="layers-wrapper">
      <i class="layer"></i>
      <i class="layer"></i>
      <i class="layer"></i>
    </div>
  </div>

  <div id="app"></div>
  <div ></div>

  <!-- <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script> -->
  <!-- 使用CDN的JS文件 -->

  <!-- built files will be auto injected -->
</body>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    let dom = document.getElementById("main-loading");
    dom.style.display = "none";
  });
</script>

</html>